<template>
  <div class="step-main">
    <el-row :gutter="20">
       <el-col :span="14">
        <NewCard title="材料列表">
            <el-table :data="tableList" style="width: 100%" highlight-current-row>
                <el-table-column
                    label="序号"
                    width="100"
                    type="index">
                </el-table-column>
                <el-table-column
                    label="材料名称">
                    <template slot-scope="scope">
                        <p>{{scope.row.name}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="用户上传的材料"
                    width="350">
                    <template slot-scope="scope">
                        <p>{{scope.row.file}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="材料评估">
                    <template slot-scope="scope">
                        <p>{{ getStateMate(scope.row.state) }}</p>
                    </template>
                </el-table-column>
            </el-table>
            <SubBtn>
                <template slot="btn">
                    <el-button round>添加材料</el-button>
                    <el-button round>驳回给用户</el-button>
                    <el-button type="primary" round>下一步</el-button>
                </template>
            </SubBtn>
        </NewCard>
       </el-col>
       <el-col :span="10">
           <NewCard title="法定代表人身份证" :isright="true">
               <template slot="right">
                   <el-button-group>
                    <el-button type="primary" :class="selectBtnState?'isActive':''" @click="clickselectBtn">用户材料</el-button>
                    <el-button type="primary" :class="selectBtnState?'':'isActive'" @click="clickselectBtn">材料样本</el-button>
                   </el-button-group>
               </template>
               <div class="userMaterial" v-if="selectBtnState">
                    <img src="../../../../../assets/images/demonstrate.jpg" alt="">
                    <SubBtn>
                        <template slot="btn">
                            <el-button round>下载</el-button>
                            <el-button round>不合格</el-button>
                            <el-button type="primary" round>合格</el-button>
                        </template>
                    </SubBtn>
               </div>
               <div class="sample-box" v-else>
                   <el-form ref="form" :model="sample" label-width="100px" label-position="left">
                        <el-form-item label="材料名称">
                            <el-input v-model="sample.name"></el-input>
                        </el-form-item>
                        <el-form-item label="材料要求">
                            <el-input v-model="sample.askFor" type="textarea" rows="5" resize="none"></el-input>
                        </el-form-item>
                        <el-form-item label="材料样本">
                            <el-button round>重新上传</el-button>
                            <img src="../../../../../assets/images/demonstrate.jpg" alt="">
                        </el-form-item>
                   </el-form>
                   <SubBtn>
                        <template slot="btn">
                            <el-button round>重置</el-button>
                            <el-button type="primary" round>保存</el-button>
                        </template>
                    </SubBtn>
               </div>
           </NewCard>
       </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
export default {
    name:'stepProcess',
    components:{SubBtn,NewCard},
    data(){
        return{
            selectBtnState:true,// 当前选中的按钮状态 true用户材料，false材料样本
            // 表格数据
            tableList: [
                {
                    id:'12345',
                    name:'营业执照',
                    file:'腾讯科技营业执照.png',
                    state:'1',
                },
                {
                    id:'12345',
                    name:'法定代表人身份证',
                    file:'法定代表人身份证.png',
                    state:'0',
                },
                {
                    id:'12345',
                    name:'营业执照',
                    file:'腾讯科技营业执照.png',
                    state:'0',
                },
            ],

            // 样本数据
            sample:{
                name:'法定代表人身份证',
                askFor:'1.着白色服装的请用淡蓝色背景颜色，着其他颜色服装的最好使用白色背景；2.人像要清晰、层次丰富、神态自然；3.公职人员不着制式服装，儿童不系红领巾。',
                sampleImg:'',
            },
        }
    },
    methods:{
        // 单击切换按钮组
        clickselectBtn(){
            this.selectBtnState = !this.selectBtnState
        },

        // 计算当前材料是 未评估/合格/不合格
        getStateMate(state){
            if(state == "0"){
                return '未评估'
            }else if(state == "1"){
                return '合格'
            }else{
                return '不合格'
            }
        }
    },
}
</script>

<style scoped>
.el-table .el-select{
    width: 90px;
}
.el-table .el-select >>> .el-input__inner{
    padding-left: 10px;
    padding-right: 10px;
}
.el-scrollbar .el-select-dropdown__item{
   padding-left: 10px;
}
.el-scrollbar .el-select-dropdown__item.selected,
.el-scrollbar .el-select-dropdown__item.hover{
    color: #F87A23;
}

::v-deep .el-table .el-table__row td{
    padding: 8px 0;
}

.step-main,
.step-main .el-row,
.step-main .el-col{
    height: 100%;
}
.step-main .el-card{
    position: relative;
}

/* 按钮组 */
.el-button-group .el-button{
  background-color: #F0F2F5;
  color: #2E3F5E;
  border: 1px solid #F0F2F5;
  padding: 10px 15px;
}
.el-button-group .el-button.isActive{
  background-color: #fff;
  color: #F87A23;
  font-weight: bold;
}

/* 用户材料 */
.userMaterial{
    margin-bottom: 60px;
}
.userMaterial img{
    width:100%;
}

/* 材料样本 */
.sample-box{
    margin-bottom: 60px;
}
::v-deep .sample-box .el-form-item__label{
    color: #2E3F5E;
}
::v-deep .sample-box .el-textarea__inner{
    font-family: Microsoft Yahei;
}
.sample-box img{
    width: 100%;
    margin-top: 10px;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>